<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义绘制一条线</title>
    <link href='bundle.css' rel='stylesheet'/>
    <!-- 引入js文件 -->
    <script src="../static/js/bundle.js"></script>
    <script src="../static/js/config.js"></script>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/js/rygj.js"></script>
</head>
<body>
<div id="map" style='width: 1440px; height: 800px;'></div>
<div>
    <button onclick="startDrawLine()">开始画线</button>
    <button onclick="finishDrawLine()">结束画线</button>
</div>
<script type="application/javascript">
    var vectorMap = new creeper.VectorMap('map', config.wmapId, config.mapBaseUrl);

//    var geoJson = {
    //        "type": "FeatureCollection",
    //        "features": [{
    //            "type": "Feature",
    //            "geometry": {
    //                "coordinates": [],
    //                "type": "LineString"
    //            }
    //        }]
    //    };
    var geoJson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "coordinates": [],
                "type": "LineString"
            }
        }]
    };
<!--
{ "status" : true,
 "time" : 1585719514956,
 "code" : 200,
 "properties" : { },
 "data" : [
  { "lat" : 33.7779764979, "lon" : 113.1708877411 },
  { "lat" : 33.7779764979, "lon" : 113.1708877411 },
  { "lat" : 33.7779764979, "lon" : 113.1708877411 }
  ] }
-->
    var onClick = function (e) {
        var lngLat = e.lngLat;

        var geo1 =  [113.18096459547502, 33.77091833801974];
        var geo2 =  [113.18146323535927, 33.772241730788565];
        var geo3 =  [113.17990207537986, 33.771883352643854];
        var geo4 =  [113.18034129618525, 33.77124047556633];
        // geoJson.features[0].geometry.coordinates.push(lngLat.toArray());
        geoJson.features[0].geometry.coordinates.push(geo1);
        geoJson.features[0].geometry.coordinates.push(geo2);
        geoJson.features[0].geometry.coordinates.push(geo3);
        geoJson.features[0].geometry.coordinates.push(geo4);
        geoJson.features[0].geometry.coordinates.push(lngLat.toArray());

        vectorMap.getSource('lineSource').setData(geoJson);
    };

    vectorMap.on('load',function () {
        vectorMap.addSource('lineSource', {
            type: 'geojson',
            data: geoJson
        });
        vectorMap.addLayer({
            type: 'line',
            source: 'lineSource',
            id: 'lineLayer',
            paint: {
                'line-color': 'red',
                'line-width': 3
            },
            layout: {
                'line-cap': 'round',
                'line-join': 'round'
            }
        });
    });

    function startDrawLine() {
        geoJson.features[0].geometry.coordinates = [];

        vectorMap.on('click',onClick);
    }

    function finishDrawLine() {
        geoJson.features[0].geometry.coordinates = [];
        vectorMap.getSource('lineSource').setData(geoJson);

        vectorMap.off('click',onClick);
    }
</script>
</body>
</html>
